/**
 * @desc 赛事执行-场地设置
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <!-- 场地标名类型 -->
        <el-col :md="6" :lg="4">
          <p>场地标名类型</p>
          <el-select v-model="SiSTKWEventsManagementCreateCompetitionLocationInput.type" size="mini">
            <el-option v-for="item in dict.locationNameType" :key="item.code" :value="item.code" :label="item.value" />
          </el-select>
        </el-col>
        <!-- 场地数量 -->
        <el-col :md="6" :lg="4" style="position: relative;">
          <p>场地数量</p>
          <el-input v-model="SiSTKWEventsManagementCreateCompetitionLocationInput.num" placeholder="请输入数字" size="mini" maxlength="2" @keyup.native="changeNum" />
          <el-tooltip class="item" effect="dark" content="最大只能设置26个场地" placement="top" style="position: absolute;top: 32px;right: -10px;">
            <div slot="content">最小必须设置1个场地 <br> 最大只能设置26个场地</div>
            <i class="el-icon-question" />
            <!-- <i slot="suffix" class="el-icon-question"></i> -->
          </el-tooltip>
        </el-col>
        <el-col :md="6" :lg="4" style="margin-left:10px">
          <!-- 确定 -->
          <el-button :loading="submitLoading" style="margin-top:27px" type="primary" size="mini" @click="confirm">确定</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row v-loading="loading" :gutter="20" class="gl_mt_20">
      <el-col v-for="item in areaList" :key="item.code" :span="4" class="gl_mb_15">
        <el-card shadow="always" class="siteCard">
          {{ item.name }}
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
// import { translateByCode } from '@/lib/getTransData';
// import { CopyData } from '@/lib';
import { api_POST_EventsManagementCompetitionLocationLocationByTypeNum, api_GET_EventsManagementCompetitionLocation } from '@/extend/api/gameswaggerApi/app';
import { SiSTKWEventsManagementCreateCompetitionLocationInput } from '@/lib/form/game/swaggerForm';
export default {
  name: 'SiteSetting',
  data() {
    return {
      SiSTKWEventsManagementCreateCompetitionLocationInput: new SiSTKWEventsManagementCreateCompetitionLocationInput(),
      gameId: '', // 赛事id
      loading: false,
      submitLoading: false,
      areaList: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    }),
    // 生成大写字母数组
    letterList: function () {
      // 生成大写字母，A的Unicode值为65
      const array = [];
      for (let i = 65; i < 91; i++) {
        array.push(String.fromCharCode(i));
      }
      return array;
    },
    // 生成数字数组
    numsList: function () {
      return Array.from(new Array(9 + 1).keys()).slice(1);
    }
  },
  created() {
    this.gameId = this.$route.params.id;
    this.refreshList();
    this.getDict().then(res => {
      this.SiSTKWEventsManagementCreateCompetitionLocationInput.type = res.locationNameType[0].code;
      this.SiSTKWEventsManagementCreateCompetitionLocationInput.num = 1;
    });
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 刷新列表
    refreshList() {
      const _this = this;
      _this.loading = true;
      api_GET_EventsManagementCompetitionLocation({ competitionId: _this.gameId }).then(res => {
        console.log(res);
        _this.areaList = res.items;
        if (_this.areaList.length > 0 && _this.areaList[0].name) {
          // 判断场地数据是数字还是字母
          if (_this.areaList[0].name === '1') {
            _this.SiSTKWEventsManagementCreateCompetitionLocationInput.type = _this.dict.locationNameType[0].code;
          } else {
            _this.SiSTKWEventsManagementCreateCompetitionLocationInput.type = _this.dict.locationNameType[1].code;
          }
        }
        _this.$set(_this.SiSTKWEventsManagementCreateCompetitionLocationInput, 'num', res.totalCount);
        _this.loading = false;
        _this.submitLoading = false;
      })
        .catch(() => {
          _this.loading = false;
          _this.submitLoading = false;
        });
    },
    changeNum() {
      this.SiSTKWEventsManagementCreateCompetitionLocationInput.num = this.SiSTKWEventsManagementCreateCompetitionLocationInput.num.replace(/[^\d]/g, '');
      if (this.SiSTKWEventsManagementCreateCompetitionLocationInput.num > 26) {
        this.$set(this.SiSTKWEventsManagementCreateCompetitionLocationInput, 'num', 26);
      }
      // eslint-disable-next-line eqeqeq
      if (this.SiSTKWEventsManagementCreateCompetitionLocationInput.num == 0) {
        this.$set(this.SiSTKWEventsManagementCreateCompetitionLocationInput, 'num', 1);
      }
    },
    // 确认
    confirm() {
      const _this = this;
      this.submitLoading = true;
      this.loading = true;
      this.SiSTKWEventsManagementCreateCompetitionLocationInput.competitionId = this.gameId;
      api_POST_EventsManagementCompetitionLocationLocationByTypeNum(this.SiSTKWEventsManagementCreateCompetitionLocationInput).then(res => {
        this.$message({
          // 添加成功！
          message: '设置场地成功',
          type: 'success'
        });
        _this.refreshList();
      }, () => {
        this.$message({ type: 'error', message: '场地设置失败' });
      });
    }
  }
};
</script>
<style scoped>
  .siteCard{
    height: 130px;
    font-size: 70px;
    text-align: center;
  }
</style>
